<template>
  <div>
    <!-- 编辑dialog表单区 -->
    <el-dialog
      title="用户编辑"
      width="35%"
      :visible.sync="FormInfo.isShow"
      @close="ResetForm"
    >
      <el-form
        label-width="120px"
        :rules="formFules"
        status-icon
        ref="FormRef"
        :model="FormInfo"
      >
        <el-form-item
          v-for="(item, index) in FormInfo.DialogTag"
          :key="index"
          :label="item.tag"
          label-width="120px"
        >
          <el-input v-model="item.rolesInfo"></el-input>
        </el-form-item>
      </el-form>

      <!-- 编辑表单提交 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="ResetForm">取 消</el-button>
        <el-button type="primary" @click="upDataEditForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validateEMail, validatePhone } from "../common/regexp";
export default {
  name: "Dialog",
  props: ["DialogForm"],
  data() {
    return {
      // 输入框信息
      FormInfo: {},

      // 表单初始验证
      formFules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: validateEMail,
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    //重置表单
    ResetForm() {
      //重置表单
      this.FormInfo.DialogTag[0].rolesInfo = "";
      this.FormInfo.DialogTag[1].rolesInfo = "";
      this.FormInfo.isShow = false;
    },
    // 确定按钮更新
    upDataEditForm() {
      //触发Rolse的编辑更新方法
      this.$bus.$emit("upEditForm", this.FormInfo.rolessList);
    },
  },
  created() {
    // 转存对象
    this.FormInfo = this.DialogForm;
    // 弹窗
    this.editDialogVisible = this.FormInfo.isShow;
  },
};
</script>

<style>
</style>